<template>
  <div>
    <!-- <div class="mold-item">
      <div class="filed-row">
        <div class="item-filed" style="flex: 1">
          <div class="item-title">模型编码</div>
          <div class="item-value">{{ _props.moldDispatchItem?.moldCode }}</div>
        </div>
        <div class="item-filed" style="flex: 1">
          <div class="item-title">模型名称</div>
          <div class="item-value">{{ _props.moldDispatchItem?.moldName }}</div>
        </div>
      </div>
      <div class="filed-row">
        <div class="item-filed" style="flex: 1">
          <div class="item-title">模型规格</div>
          <div class="item-value">{{ _props.moldDispatchItem?.moldSpec }}</div>
        </div>
      </div>
    </div> -->
    <el-row :gutter="12">
      <el-col
        v-for="cavityItem in _props.moldDispatchItem.cavityList"
        :key="cavityItem.pkCavity"
        :span="state.span"
      >
        <div style="width: 100%; border: 1px solid #e0e0e0">
          <div class="cavity-item">
            <div class="filed-name" style="margin-bottom: 6px">
              {{ cavityItem.cavityName }}
            </div>
            <div class="filed-name" style="margin-bottom: 6px">
              {{ cavityItem.dispatchItem.dispatchCode }}
            </div>
            <div
              style="
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
              "
            >
              <div class="item-filed-content" style="flex: 1">
                <div class="filed-placeholder">编码</div>
                {{ cavityItem.cavityCode }}
              </div>
              <div class="item-filed-content" style="flex: 1">
                <div class="filed-placeholder">型号</div>
                {{ cavityItem.cavitySpec }}
              </div>
            </div>
          </div>

          <div v-if="cavityItem.dispatchItem" class="dispatch-item">
            <div class="jb-scddh">{{ cavityItem.dispatchItem.scddh }}</div>
            <div class="item-filed">
              <div class="filed-name">
                {{ cavityItem.dispatchItem.invname }}
              </div>
              <div class="item-filed-content">
                <div class="filed-placeholder">编码</div>
                {{ cavityItem.dispatchItem.invcode }}
              </div>
              <div class="item-filed-content">
                <div class="filed-placeholder">型号</div>
                {{ cavityItem.dispatchItem.invspec }}
              </div>
              <div class="item-filed-content" style="box-shadow: none">
                <div class="filed-placeholder">规格</div>
                {{ cavityItem.dispatchItem.invtype }}
              </div>
            </div>

            <div class="item-filed">
              <div class="item-filed-content">
                <div class="filed-placeholder">工序</div>
                {{ cavityItem.dispatchItem.opName }}
              </div>
              <div class="item-filed-content" style="box-shadow: none">
                <div class="filed-placeholder">数量</div>
                {{ cavityItem.dispatchItem.mQty }}
              </div>
            </div>
          </div>

          <div v-else class="empty-item">暂未派工</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
  const _props = defineProps({
    moldDispatchItem: {
      type: Object,
      default: () => {},
    },
  })
  const state = reactive({
    span: 8,
  })
</script>
<style lang="scss" scoped>
  .mold-item {
    width: 100%;
    height: 88px;
    padding: 6px;
    margin-bottom: 6px;
    background: url(~@/assets/jb/ca-item.png);
    border-radius: 5px;
    .filed-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      .item-filed {
        padding: 0px 6px;
        margin-bottom: 3px;
        .item-title {
          font-size: 12px;
          font-weight: 500;
          line-height: 14px;
          color: #777;
        }
        .item-value {
          font-size: 16px;
          font-weight: 800;
          line-height: 24px;
        }
      }
    }
  }

  .dispatch-item {
    position: relative;
    padding: 3px;
    background: linear-gradient(
      180deg,
      #ecf2ff 0%,
      rgba(255, 255, 255, 0.1) 60%
    );
    border: 2px solid #ffffff;
    border-radius: 3px;
    box-shadow: 0 4px 16px rgba(55, 99, 170, 0.1);
    transition: box-shadow 0.3s ease-in-out;
    &:hover {
      box-shadow: 0 4px 16px rgba(55, 99, 170, 0.2);
    }
    &:hover::before {
      position: absolute;
      top: -2px;
      left: -2px;
      z-index: 0;
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      content: '';
      border: 1px solid #0052d9;
    }
    .refresh-btn {
      position: absolute;
      top: 4px;
      right: 6px;
      z-index: 99999;
    }
    .jb-scddh {
      position: relative;
      width: 100%;
      height: 16px;
      padding-left: 6px;
      margin-bottom: 3px;
      font-size: 12px;
      font-weight: bold;
      line-height: 16px;
      color: white;
      text-align: left;
      background: linear-gradient(45deg, #4793ff, #0064e4);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    }
    .item-filed {
      padding: 0px 6px;
      margin-bottom: 3px;
      border: 1px solid rgb(235, 236, 236);
      .filed-name {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        color: #333;
      }
      .filed-placeholder {
        font-size: 10px;
        font-weight: 400;
        line-height: 14px;
        color: #999;
      }
      .item-filed-content {
        margin-bottom: 3px;
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
        color: #777;
        box-shadow: 0 1px 0 0 #ebecec;
      }
    }
    .filed-number {
      padding-left: 6px;
      font-size: 10px;
      font-weight: 400;
      line-height: 14px;
      line-height: 16px;
      color: #999;
    }
    :deep(.el-input__wrapper) {
      padding: 0;
      background-color: transparent;
      // border-bottom: 1px solid #ffffff;
      border: 1px solid #f0f1f2;
      border-radius: 0;
      box-shadow: none;
    }
    :deep(.el-input__inner) {
      font-weight: 600px;
      color: #333;
    }
    :deep(.el-tag) {
      height: 16px;
      padding: 0 3px;
    }
    .dispatch-item-filed {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .dispatch-item-value {
      flex: 1;
      padding: 0 6px;
    }
  }
  .cavity-item {
    width: 100%;
    padding: 6px;
    background: url(~@/assets/jb/cavity-item.png);
    .filed-name {
      font-size: 14px;
      font-weight: 600;
      line-height: 16px;
      color: #333;
    }
    .filed-placeholder {
      font-size: 10px;
      font-weight: 400;
      line-height: 14px;
      color: #999;
    }
    .item-filed-content {
      margin-bottom: 3px;
      font-size: 14px;
      font-weight: 500;
      line-height: 16px;
      color: #777;
      box-shadow: 0 1px 0 0 #ebecec;
    }
  }
  .empty-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    // height: calc(100% - 40px);
  }
</style>
